<template>
    <div class="propertys">
        <div class="types" v-for="(item, i) in propertys" :key="i">
            <h3>{{item.attr_name}}</h3>
            <ul v-for="(it, ind) in item.values" :key="ind">
                <li :class="colors.includes(it) || sizes.includes(it) ? 'active' : ''" @click="choseProperty(i, it, item.attr_name)">{{it}}</li>
            </ul>
        </div>
    </div>
</template>

<script>
import axios from 'axios'
import { onMounted, ref, reactive, toRefs, watch } from 'vue'
export default {
    props: {
        attrs: Array,
        arr: Array
    },
    setup(props, {emit}) {
        const propertys = ref([])
        const state = reactive({
            colors: [], // 用来保存选中的颜色
            sizes: [], // 用来保存选中的内存大小
            attrs: [] // 用来保存选中的属性
        })
        onMounted(() => {
            // 请求json数据
            axios.get('/data.json').then(res => {
                // console.log(res);
                propertys.value = res.data.data
            })
        })

        // 选择属性的事件
        function choseProperty(i, attr, name) {
            // console.log(i); i = 0 则表示选择的是内存属性 i = 1 则表示选择的是颜色属性
            // attr是选择的属性的名字
            // console.log(attr);
            // console.log(name); 是属性类别名称
            // 假设属性可以根据用户心情随意选
            // state.attrs[i] = name
            if(!state.attrs.includes(name)) {
                state.attrs.push(name)
            } 
            // console.log(state.attrs);
            // console.log(state.attrs);
            if(i === 0) {
                let ind = state.sizes.indexOf(attr) // 如果ind的值是 -1 则表示sizes中还没有当前点击的属性 
                if(ind === -1) {
                    state.sizes.push(attr)
                } else {
                    state.sizes.splice(ind, 1)
                }
            } else {
                let ind = state.colors.indexOf(attr) // 如果ind的值是 -1 则表示sizes中还没有当前点击的属性 
                if(ind === -1) {
                    state.colors.push(attr)
                } else {
                    state.colors.splice(ind, 1)
                }
            }
            // 先做可以任意选择属性
            if(state.colors.length === 0) {
                state.attrs = state.attrs.filter(item => {
                    return item != '颜色'
                })
            }

            if(state.sizes.length === 0) {
                state.attrs = state.attrs.filter(item => {
                    return item != '内存'
                })
            }

            let arr = [] // 用来保存组合完成的属性数据
            // 判断表头的数据是谁
            if(state.attrs[0] === '颜色') {
                for(let i = 0; i<state.colors.length; i++) {
                    if(state.attrs.length === 2) {
                        state.sizes.forEach(item => {
                            arr.push([state.colors[i], item])
                        })
                    } else {
                        arr.push([state.colors[i]])
                    }
                    
                }
                
            } else {
                for(let i = 0; i<state.sizes.length; i++) {
                    if(state.attrs.length === 2) {
                        state.colors.forEach(item => {
                            arr.push([state.sizes[i], item])
                        })
                    } else {
                        arr.push([state.sizes[i]])
                    }
                    
                }
            }


            // console.log(state);
            emit('update:attrs', state.attrs)
            emit('update:arr', arr)
        }

        watch(() => props.attrs, (to) => {
            // console.log(to);
            if(to.length === 0) {
                state.colors = []
                state.sizes = []
            }
        }, {
            deep: true
        })

        return {
            propertys,
            ...toRefs(state),
            choseProperty
        }
    }
}
</script>

<style scoped lang="scss"> 
.propertys {
    width: 100%;
}
ul {
list-style: none;
padding: 0;
margin: 0;}
.types {
    width: 100%;
    display: flex;
    align-items: center;
    border-bottom: 3px solid #333;
    li {
        padding: 6px 10px;
        border: 2px solid red;
        margin-left: 30px;
        border-radius: 6px;
        font-size: 20px;
        cursor: pointer;
    }
    .active {
    background-color: red;}
}
</style>